<div style="min-width:1050px;">
  <nz-breadcrumb class="breadcrumb-pos">
    <i nz-icon type="link" theme="outline" style="color:#1890FF;padding-right:4px"></i>
    <nz-breadcrumb-item>
      打印机
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <div nz-row [nzGutter]="16" style="border-bottom: 1px solid #ccc;margin-bottom: 8px;min-width: 800px;">
    <div nz-col [nzSpan]="4">
      <nz-form-item nzFlex>
        <nz-form-label>设备名称</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="name">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3">
      <nz-form-item nzFlex>
        <nz-form-label>品牌</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="brandName">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3">
      <nz-form-item nzFlex>
        <nz-form-label>型号</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="typeCode">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="4">
      <nz-form-item nzFlex>
        <nz-form-label>租赁客户</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="companyName">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3" style="min-width:150px;">
      <nz-form-item nzFlex>
        <nz-form-label>是否签约</nz-form-label>
        <nz-select [(ngModel)]="isSigned" style="margin-top:3px;">
          <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
          <nz-option [nzLabel]="'未签约'" [nzValue]="'0'"></nz-option>
          <nz-option [nzLabel]="'签约中'" [nzValue]="'1'"></nz-option>
          <nz-option [nzLabel]="'待清算'" [nzValue]="'2'"></nz-option>
        </nz-select>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3">
      <nz-form-item nzFlex>
        <nz-form-label>状态</nz-form-label>
        <nz-select [(ngModel)]="status" style="margin-top:3px;">
          <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
          <nz-option [nzLabel]="'启用'" [nzValue]="'0'"></nz-option>
          <nz-option [nzLabel]="'禁用'" [nzValue]="'1'"></nz-option>
          <nz-option [nzLabel]="'维护中'" [nzValue]="'2'"></nz-option>
          <nz-option [nzLabel]="'离线'" [nzValue]="'3'"></nz-option>
        </nz-select>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="4" style="min-width:200px;">
      <nz-form-item nzFlex>
        <nz-form-label>自动续约</nz-form-label>
        <nz-select [(ngModel)]="isAuto" style="margin-top:3px;">
          <nz-option [nzLabel]="'全部'" [nzValue]="''"></nz-option>
          <nz-option [nzLabel]="'是'" [nzValue]="'1'"></nz-option>
          <nz-option [nzLabel]="'否'" [nzValue]="'0'"></nz-option>
        </nz-select>
        <button nz-button [nzType]="'primary'" [nzLoading]="btn_loading" style="margin:3px 0 0 20px;"
          (click)="getPrintlist()">查询</button>
      </nz-form-item>
    </div>
  </div>

  <div class="add_btn">
    <button nz-button nzType="primary" routerLink="/main/addprinter"><i nz-icon type="plus"></i>添加</button> &nbsp;
    <button nz-button style="float:right" (click)="exportOut()">导出Excel</button>
    <nz-upload [nzShowUploadList]="false" [nzName]="'excel'" (nzChange)="logoChange($event)" nzAction="{{uploadUrl}}"
      style="float:right;;margin-right:10px;">
      <button nz-button [nzLoading]="isLoading">
        <i nz-icon type="upload"></i><span>导入Excel</span>
      </button>
    </nz-upload>
    <button nz-button style="float:right;margin-right:10px;" (click)="downLoadFile()">下载模板</button>
  </div>
  <nz-table #rowSelectionTable [nzData]="printerlist" [nzLoading]="loading" [nzShowPagination]="false"
    [nzBordered]="true">
    <thead>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkAll($event)"></th>
        <th>设备名称</th>
        <th>品牌<hr>型号</th>
        <th>设备状态 <hr> 盒子状态</th>
        <th>签约状态<hr>租赁客户</th>
        <th>当前打印量
          <hr>黑白 / 彩色</th>
        <th>墨余量(%)
          <hr>黑 / 青 / 红 / 黄</th>
        <th>签约开始日期
          <hr>签约结束日期</th>
        <th>结算期数
          <hr>自动续约</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of printerlist">
        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
        <td>{{data.name}}</td>
        <td>{{data.brandName}}<hr>{{data.typeCode}}</td>
        <td><span
            [ngClass]="{'green':data.status==0,'red':data.status==1 || data.status==3,'yellow':data.status==2}">{{data.statusStr}}
          </span>
          <hr> <span [ngClass]="{'related': data.boxStatus == 1,'norelated': !data.boxStatus, 'errorrelated': data.boxStatus ==2 || data.boxStatus ==3 }">{{data.boxStatusStr}}</span></td>
        <td><span [ngClass]="{'signed':data.isSigned}">{{data.isSignedStr}}</span><hr>{{data.userId?userinfo[data.userId].companyName:"-"}}</td>
        <td>{{data.blackCount?data.blackCount:0}} / {{data.coloursCount?data.coloursCount:0}}</td>
        <td><span
            [ngClass]="{'yellow':data.kResidue <= printerSet[data.id].kWarning}">{{(data.kResidue || data.kResidue == 0)?data.kResidue:"-"}}</span>
          / <span
            [ngClass]="{'yellow':data.cResidue <= printerSet[data.id].cWarning}">{{(data.cResidue || data.cResidue == 0)?data.cResidue:"-"}}</span>
          / <span
            [ngClass]="{'yellow':data.mResidue <= printerSet[data.id].mWarning}">{{(data.mResidue || data.mResidue == 0)?data.mResidue:"-"}}</span>
          / <span
            [ngClass]="{'yellow':data.yResidue <= printerSet[data.id].yWarning}">{{(data.yResidue || data.yResidue == 0)?data.yResidue:"-"}}</span>
        </td>
        <td>{{data.signedBegin?data.signedBegin.slice(0,10):'--'}}
          <hr> {{data.signedEnd?data.signedEnd.slice(0,10):'--'}}</td>
        <td>{{data.paySum}}<hr>{{data.isAuto==false?"否":"是"}}</td>
        <td>
          <a style="margin-right:12px;" routerLink="/main/editprinter/{{data.id}}">编辑</a>
          <a style="color:rgb(25, 190, 182);margin-right:12px;" routerLink="/main/printerinfo/{{data.id}}">详情</a>
          <a style="color:rgb(140, 25, 206);" *ngIf="!data.isSigned  && data.isSigned !==2 && data.status !==1"
            routerLink="/main/signing/{{data.id}}">签约</a>
          <a style="color:rgb(230, 55, 24);" *ngIf="data.isSigned && data.isSigned !==2 && data.status !==1"
            (click)="confirm(data.id)">解约</a>
          <a style="color:rgb(230, 55, 24);" *ngIf="data.isSigned && data.isSigned ==2"
            (click)="confirm2(data.id)">清算</a>
          <br>
          <nz-popconfirm *ngIf="!data.isSigned" style="margin-right:12px;" [nzTitle]="'确定要改变打印机状态么?'"
            (nzOnConfirm)="editStatus(data.id,data.status)">
            <a nz-popconfirm style="color:#E48675;">{{data.status==0?"禁用":"启用"}}</a>
          </nz-popconfirm>
          <nz-popconfirm *ngIf="!data.isSigned && data.isSigned !==2" [nzTitle]="'确定要删除么?'"
            (nzOnConfirm)="delete(data.id)">
            <a nz-popconfirm style="color:red;">删除</a>
          </nz-popconfirm>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <a (click)="bindSign()">批量签约</a>
  <nz-modal [nzWidth]="700" [(nzVisible)]="isSignVisible" nzTitle="批量签约" [nzFooter]="null"
    (nzOnCancel)="signHandleCancel()">
    <app-signing [childValue]="childValue" (event)="showSignInfo($event)"></app-signing>
  </nz-modal>
  <br>
  <a (click)="bindSetconfig()">批量预警配置</a>
  <nz-modal [nzWidth]="700" [(nzVisible)]="isVisible" nzTitle="批量预警配置" [nzFooter]="null" (nzOnCancel)="handleCancel()">
    <app-printerconfig [childValue]="childValue" (event)="showInfo($event)"></app-printerconfig>
  </nz-modal>
  <nz-pagination style="float:right;margin-top:12px" [nzPageIndex]="PageIndex" [nzPageSize]="PageSize"
    [nzTotal]="PageTotal" (nzPageIndexChange)="PageIndexChange($event)" [nzHideOnSinglePage]="true"
    [nzShowTotal]="totalTemplate"></nz-pagination>
  <ng-template #totalTemplate let-total>
    共 {{total}} 条数据
  </ng-template>
</div>